<h2>New Design</h2>

<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzFor="name" nzRequired>Name</nz-form-label>
    <nz-form-control [nzSpan]="14" [nzErrorTip]="nameErrorTpl">
      <!-- <nz-input-group nzCompact nzSearch [nzAddOnAfter]="suffixIconButton"> -->
      <input
        nz-input
        type="text"
        name="name"
        id="name"
        formControlName="name"
      />
      <ng-template #nameErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          Please input a name!
        </ng-container>
        <ng-container *ngIf="control.hasError('duplicated')">
          The name is redundant!
        </ng-container>
      </ng-template>
      <!-- </nz-input-group> -->
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzFor="name" nzRequired>Type</nz-form-label>
    <nz-form-control [nzSpan]="14" nzErrorTip="Please select a ship type!">
      <nz-select formControlName="type">
        <nz-option
          *ngFor="
            let shipType of ms.game.shipyardManager.shipTypes;
            trackBy: getTypeId
          "
          [nzLabel]="shipType.name"
          [nzValue]="shipType.id"
          nzCustomContent
        >
          <span nz-typography [nzType]="!shipType.unlocked ? 'warning' : ''">{{
            shipType.name
          }}</span>
        </nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item nz-row>
    <nz-form-control [nzSpan]="14" [nzOffset]="4">
      <button
        nz-button
        nzType="primary"
        [disabled]="ms.game.shipyardManager.shipDesigns.length >= 40"
      >
        <span>Create</span>
      </button>
    </nz-form-control>
  </nz-form-item>

  <div class="alert-container">
    <nz-alert
      *ngIf="ms.game.shipyardManager.shipDesigns.length < 40; else limitReached"
      nzType="info"
      nzShowIcon
      [nzMessage]="designInUse"
    ></nz-alert>
    <ng-template #designInUse>
      Design in use:
      {{ ms.game.shipyardManager.shipDesigns.length | format: true }} of 40
    </ng-template>

    <ng-template #limitReached>
      <nz-alert
        #limitReached
        nzType="warning"
        nzShowIcon
        [nzMessage]="designMax"
      ></nz-alert>
    </ng-template>
    <ng-template #designMax>
      Design limit reached. Modify or delete an existing design.</ng-template
    >
  </div>
</form>

<ng-template #suffixIconButton>
  <button
    nz-button
    nzType="secondary"
    nzSearch
    class="last-button"
    (click)="getRandomName($event)"
  >
    <i nz-icon nzType="my:perspective-dice-six-faces-random"></i>
  </button>
</ng-template>

<!-- 
<ng-template #suffixTemplate
  ><i
    nz-icon
    nz-tooltip
    class="ant-input-clear-icon"
    nzTheme="fill"
    nzType="close-circle"
    *ngIf="getName() !== ''"
    (click)="removeName()"
  ></i
></ng-template> -->
